<template>
    <!-- 人员管理-考勤中心-打卡记录 -->
    <div class="empCard">
        <div class="top">
            <div class="search">
                <div class="list">
                    <span>选择日期:</span>
                    <DatePicker :editable='false' :clearable='false' type="daterange"  placeholder="请选择日期" style="width: 300px" v-model="value" @on-change="getValue"></DatePicker>
                </div>
                <div class="list">
                    <Input search enter-button placeholder="人员姓名搜索"  style="width:250px"  @on-search="onSearch" @on-enter="onSearch" v-model="keyword" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
            </div>
            <div class="down">
                <el-button type="primary" size="small" plain @click="updateRow" style="margin-right:20px;" :disabled="!btnList.includes('emp/card/add')">添加打卡记录</el-button>
            </div>
        </div>
        <div class="bottom">
            <div class="table">
                <el-table :data="list" :height="tableHeight" :stripe='true'>
                    <el-table-column prop="empName" label="人员姓名" ></el-table-column>
                    <el-table-column prop="phone" label="人员电话" ></el-table-column>
                    <el-table-column  label="人员头像" >
                        <template slot-scope="scope">
                            <div class="demo-image__preview">
                                <el-image :src="scope.row.photo==''||!scope.row.photo?src:scope.row.photo" style="display:block;width:45px;height:45px;border-radius:50%" :preview-src-list="[scope.row.photo==''||!scope.row.photo?src:scope.row.photo]" ></el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="groupName" label="班组" ></el-table-column>
                    <el-table-column prop="type" label="来源" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.type == 1">电子围栏</span>
                            <span v-if="scope.row.type == 2">闸机</span>
                            <span v-if="scope.row.type == 3">后台</span>
                            <span v-if="scope.row.type == 4">二维码</span>
                            <span v-if="scope.row.type == 5">APP管理人员端人脸考勤</span>
                            <span v-if="scope.row.type == 6">APP工人人端人脸考勤</span>
                            <span v-if="scope.row.type == 7">APP工人人端手动添加</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="direction" label="方向" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.direction == 0" class="grey">出</span>
                            <span v-if="scope.row.direction == 1" class="blue">进</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="打卡时间" width="170"></el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button style="color:red" @click.native.prevent="removeRow(scope.$index, list)" type="text" size="small" :disabled="!btnList.includes('emp/card/delete')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>
        <Modal v-model="updateModal" title="添加进出记录" width="520px;" :mask-closable="false">
            <div class="item">
                <span class="tip">*</span>
                <span>人员:</span>
                 <Select v-model="empId" style="width:300px" placeholder="请选择人员" :filterable="true">
                    <Option v-for="item in empList" :value="item.empId" :key="item.empId">{{item.empName}}</Option>
                </Select>
            </div>
            <div class="item">
                <span>方向:</span>
                <div class="radio">
                    <el-radio-group v-model="radio">
                        <el-radio :label="0">出</el-radio>
                        <el-radio :label="1">进</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>打卡时间:</span>
                <DatePicker type="datetime" :editable="false" :options='options' placeholder="请选择打卡时间" style="width: 300px" @on-change="getTime" v-model="time"></DatePicker>
            </div>
            <div class="item">
                <span>头像:</span>
                <el-upload
                    style=" width: 100px; height: 100px;display: flex;justify-content: center;align-items: center;border: 1px dashed #ccc"
                    class="avatar-uploader"
                    :headers="headers"
                    :action="$axios.defaults.baseURL+'/ms/api/emp/attend/inputData/anon/upload'"
                    :show-file-list="false"
                    :on-success="imgFirstSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageFirstUrl" :src="imageFirstUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="sumbit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>

import { format, GetallDate} from "@/sever/utils.js";
import { getInputDataList, getInputDataAdd, getInputDataDel,getAllPersonnelList } from "@/api/api.js";
export default {
    data() {
        return {
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            pageNum: 1,
            pageSize: 10,
            totalCount: "",
            current: 1,
            keyword:"",
            btnList:'',
            value:[
                format(new Date(new Date().getTime() - 518400000), "YYYY-MM-DD"),
                format(new Date(), "YYYY-MM-DD")
            ],
            list:[],
            deleteModal:false,

            updateModal :false,
            radio:1,
            time:"",
            empList:[],
            empId:'',
            tableHeight:window.innerHeight - 345,
            imageFirstUrl:"",
            src: require("./../../assets/images/common/noPeo.png"),
            previewList: [], //图片预览
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageNum =1;
                this.current =1;
                this.keyword ="";
                this.value = [format(new Date(new Date().getTime() - 518400000), "YYYY-MM-DD"), format(new Date(), "YYYY-MM-DD")];
                this.getAllList();
                this.getEmpList();
            }
        }
    },
    methods: {
       setPreview(src) {
            //图片预览
            this.previewList = [];
            this.previewList.push(src);
        },
        imgFirstSuccess(res, file) {
            this.imageFirstUrl = res.data.path;
            this.$Message.success("上传成功");
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                this.$Message.error("上传头像图片大小不能超过 5MB!");
            }
            return;
        },
        //获取所有人员
        getEmpList(){
            let params = {
                deptId :this.deptId
            }
            getAllPersonnelList(params).then(res=>{
                if(res.code == 200) {
                    this.empList =res.data.list;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getAllList(){
            let params={
                deptId:this.deptId,
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                startDate: this.value[0] ? this.value[0] + " 00:00:00" : null,
                endDate: this.value[1] ? this.value[1] + " 00:00:00" : null,
                keyword:this.keyword,
            }
            getInputDataList(params).then(res=>{
                if(res.code == 200) {
                    this.list =res.data.list;
                    this.totalCount =res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getValue(value){
            this.pageNum = 1;
            this.current = 1;
            this.value =value;
            this.getAllList();
        },
        onSearch(){
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        pageChange(index){
            this.pageNum =index;
            this.getAllList();
        },
        pageSizeChange(index){
            this.pageSize =index;
            this.getAllList();
        },
        // 添加打卡记录
        updateRow(){
            this.radio = 0;
            this.time ="";
            this.empId ="";
            this.imageFirstUrl ="";
            this.updateModal = true;
        },
        // 打卡时间
        getTime(value){
            this.time = value;
        },
        sumbit (){
            debugger
            if(this.empId == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择人员",
                });
                return;
            }
            if(this.time == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择打卡时间",
                });
                return;
            }

            let params = {
                empId:this.empId,
                direction:this.radio,
                time:this.time,
                deptId:this.deptId,
                photo:this.imageFirstUrl,
            }
            getInputDataAdd(params).then(res=>{
                if(res.code == 200) {
                    this.updateModal =false;
                    this.$Message.success("操作成功");
                    this.getAllList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        removeRow(index,rows){
            this.deleteModal =true;
            this.removeId = rows[index].attendRecordId;
        },
        //删除打卡记录
        detele(){
            getInputDataDel(this.removeId).then(res=>{
                if(res.code == 200) {
                    this.deleteModal =false;
                    this.$Message.success("操作成功");
                    this.getAllList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        cancel(type){
            if(type == 1) {
                this.updateModal =false;
            } else if(type == 2) {
                this.deleteModal =false;
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getAllList();
        this.getEmpList();
    }
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/emp_common.less";
@import "./../../assets/style/themeBase.less";
/deep/ .el-icon-circle-close{
  color: #fff;
}
.item {
    width: 400px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin: 10px auto 20px;
    padding-left: 16px;
    box-sizing: border-box;
    span{
        width: 90px;
    }
    .radio{
        width: 300px;
        display: flex;
        justify-content: center;
    }
    .tip {
        position: absolute;
        top:8px;
        left: 0;
        color: red;
        font-size: 16px;
        width: 10px;
    }
}
/deep/ .el-upload {
    width: 100px;
    height: 100px;
    img{
        width: 100px;
        height: 100px;
    }
    i{
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/deep/.ivu-input-group{
border-radius:20px;
}
/deep/.ivu-input-group .ivu-input{
    border-radius: 20px 0 0 20px;
    border-color:#EBF2F8;
    background:#EBF2F8;
}
/deep/.ivu-input-group-append{
    border-radius: 0 20px 20px 0;
}
/deep/.el-tag.el-tag--success{
    background-color: #E7F8F2;
    border-color: #28D79C;
    color: #3FCF77;
}
/deep/.el-tag{
    border-radius: 2px;
}
/deep/.ivu-select-selection{
    border-radius: 2px;
}
.grey{
    display:inline-block;
    background-color:rgba(169, 176, 187, 0.1);
    border-radius:6px;
    border:1px solid #A9B0BB;
    color:#A9B0BB;
    padding:0 8px;
}
.blue{
    display:inline-block;
    background-color: rgba(33, 237, 243, 0.1);
    border:1px solid #21EDF3;
    color: #21EDF3;
    border-radius:6px;
    padding:0 8px;
}
.empCard {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .top {
        width: 100%;
        height: 72px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            width: auto;
            margin-left: 20px;
            padding-top: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 20px;
                margin-right: 20px;
                span {
                    width: 70px;
                }
            }
        }
        .down {
            width: auto;
            margin-right: 20px;
        }
    }
    .bottom {
        width: 100%;
        padding: 20px;
        margin-top: 10px;
        box-sizing: border-box;
        height: calc(100% - 82px);
        background: #fff;
        border-radius: 10px;
        .down {
            width: 98%;
            margin: 0 auto;
            margin-top: 20px;
        }
        .msg {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 24px;
                p {
                    margin-right: 10px;
                    font-size: 16px;
                    color: #000;
                    &:nth-child(2) {
                        color: red;
                    }
                }
            }
        }
        .updateCorp {
            cursor: pointer;
            margin-left: 5px;
            padding: 2px 4px;
            font-size: 12px;
            font-weight: 400;
            line-height: 1;
            color: #ffffff;
            border-radius: 3px;
            background-color: var(--themeColor);
        }
    }
}
</style>


